$(function(){
    //存储格式 var data = [{title:'xxx',done : false},{}]
    //当用户在输入框输入内容之后 按下回车键 获取输入框中的内容
    
    //用户打开页面 获取本都存储的数据调用load函数
    load();
    
    $('.addTodo').keydown(function(event){
        if(event.keyCode == 13){
            if($(this).val() === ""){
                alert('不能为空！');
            }else{
                // 先读取本地存储上的数据
            var local = getData();
            // console.log(local);
            // 在把local数组进行更新  更新为用户输入的内容
            local.push({title: $(this).val() , done: false});
            // 再把数组放到本地存储中
            saveData(local);
            // todolist 本地存储的数据渲染加载到 页面中的ol或者ul
            load();
            $(this).val("");
            }
            
        }
    })
    // todolist的删除操作 应该用事件委托的方式进行获取数据的下标
    $('ol,ul').on('click','a',function(){
        //先获取数据
        var data = getData();

        var index = $(this).attr('id');
        // console.log(index);

        //根据索引号将数组中的元素进行删除
        data.splice(index,1);
        //将删完的结果保存到本地存储
        saveData(data);
        //在加载本地存储的数据进来
        load();
    })
    // todolist 正在进行和已完成的勾选操作
    $('ol,ul').on('click','input',function(){
        //先获取
        var data = getData();
        //修改数据
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        // console.log(data);
        //保存到本地存储
        saveData(data);
        //重新渲染
        load();
    })
    // 点击下方clear 清楚所有本地存储的元素
    $('.clear-btn').click(function(){
        localStorage.clear();
        location.reload();
    })
    
    //读出本地存储原来的数据
    function getData(){
        var data = localStorage.getItem('todolist');
        if(data !== null){
            // 本地存储里面的格式是字符串格式的 我们需要的是对象格式
            // 所以我们需要用JSON.parse()转换为我们的对象格式
           return JSON.parse(data);
        } else {
            return [];
        }
    }

    //保存本地存储数据
    function saveData(data) {
        localStorage.setItem('todolist',JSON.stringify(data));
    }
    //渲染加载到页面
    function load() {
        //先读取数据
        var data = getData();
        //会出现重复 我们需要在遍历之前先清空之前的元素内容
        $('ol,ul').empty();
        var todoCount = 0;
        var doneCount = 0;
        //遍历这个数据
        $.each(data,function(i,n){
            // console.log(n);
            if(n.done == false){
                $('ol').prepend('<li><input type="checkbox" class="list-cb"><span>'+n.title+'</span><a href="#" id ='+ i +' ></a></li>');
                todoCount++;
            } else {
                $('ul').prepend('<li><input type="checkbox" checked class="list-cb"><span>'+n.title+'</span><a href="#" id ='+ i +' ></a></li>');
                doneCount++;
            }
            
        })
        $('.todo-count').text(todoCount);
        $('.over-count').text(doneCount);
    }






























})